iT邦幫忙

2023 iThome 鐵人賽

DAY 23
0
Vue.js

用 Nuxt Content 搭配 Obsidian 建立自己的 Digital Garden系列 第 23

透過外掛實作文章自訂網址功能

  • 分享至 

  • xImage
  •  

因為 Obsidian 在檔名上會有限制,導致偶爾會有些情況是想要的網址路徑因此難以做到。這時候就可以來寫個 plugin 去繞過這個限制。

就像有些靜態網站產生器一樣,通常文章的 frontmatter 都會有個 slug 屬性,一旦有定義這個屬性,該文章的路徑名稱就會以這個為主。

比如說我新增了一篇名為 @/content/diff-slug.md 的文章如下:

這時候只能透過 localhost:3000/diff-slug 這個網址去訪問。

為了實作我們前面提到的功能,要先來新增一個 Nitro Plugin @/server/plugins/custom-slug.ts,並輸入程式碼如下:

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('content:file:afterParse', (file) => {
    const isMarkdownFile = file._id.endsWith('.md')
    if (!isMarkdownFile) {
      return
    }    

    const isCustomSlug = !(typeof file.slug === 'undefined')
    if (!isCustomSlug) {  
      return
    }

    const dir = file._file.replace('/index.md', '').split('/').slice(0, -1).join('/')
    const path = dir ? `/${dir}/` : '/'
    file._path = `${path}${file.slug}`
})

一樣先做一個檢查,判斷當前檔案是否為 Markdown。接著再判斷該檔案有沒有定義 slug 屬性。如果有的話,就透過覆寫 file._path 來改變該篇文章的網址。

原本的路徑已經找不到檔案了。

透過 slug 定義的 custom-slug 就可以找到原本的那篇文章。


上一篇
透過外掛實作將 Wikilink 轉換成 Markdown Link
下一篇
新增其他發文類型
系列文
用 Nuxt Content 搭配 Obsidian 建立自己的 Digital Garden30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言